<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-detail-container`]">
      <view class="card flex">
        <image :src="formData.item_url"></image>
        <view class="problem">
          <view>{{ formData.item_name }}</view>
          <view>{{ formData.detail }}</view>
          <view>{{ formData.remark }}</view>
        </view>
      </view>
      <view class="card step">
        <view class="step-wrap">
          <!-- 如果是已拒绝则另外显示 stepState == 6 为已拒绝 只能这样做... -->
          <template v-if="stepState != 6">
            <view
              v-for="(item, index) in stepList"
              :key="index"
              :class="[
                'step-item',
                index > stepState ? 'grey' : index == stepState ? '' : 'black',
                { start: stepState == 0 && index == 0 },
                { second: stepState == 1 && index == 1 },
                { third: stepState == 2 && index == 2 },
                { end: stepState >= 3 && index == 3 },
              ]"
            >
              {{ item.name }}
              <view class="triangle"></view>
            </view>
          </template>
          <template v-else>
            <view :class="['step-item', 'black']">
              {{ '待受理' }}
              <view class="triangle"></view>
            </view>
            <view class="step-item" v-for="(item, index) in 2" :key="index">
              <span style="visibility: hidden">空占位</span>
            </view>
            <view :class="['step-item', 'grey']">
              {{ '不受理' }}
              <view class="triangle"></view>
            </view>
          </template>
        </view>
        <view class="step-detail">
          <view class="left">
            <p class="time">{{ progressData.time }}</p>
            <p class="date">{{ progressData.date }}</p>
          </view>
          <view class="center">
            {{ progressData.detail }}
          </view>
          <view class="right" @click="handleProgressDetail()">
            <!-- <uni-icons type="right" size="20"></uni-icons> -->
          </view>
        </view>
      </view>
      <view class="modules">
        <!-- <view class="title">催单详情</view>
      <view class="step-wrap">
        <view class="step-item">
          <view class="step-title">催单</view>
          <view class="step-value">
            <view class="date">2023-01-20 12:31:24</view>
            <view class="value">
              十分抱歉让您久等，小泊已催促管家，您请稍等。
            </view>
          </view>
        </view>
      </view>
      <view class="step-wrap">
        <view class="step-item">
          <view class="step-title" style="width: 100%">暂未回复,请稍等</view>
          <view class="step-value">
            <view class="date"></view>
            <view class="value"> </view>
          </view>
        </view>
      </view> -->
        <view class="title">事项详情</view>
        <view class="form-wrap">
          <view class="form-item">
            <view class="key">报修房间</view>
            <view class="value">{{ formData.room_name }}</view>
          </view>
          <view class="form-item">
            <view class="key">意向维修时间</view>
            <view class="value">{{ formData.will_repair_date }}</view>
          </view>
          <view class="form-item">
            <view class="key">家中无人是否可以进门维修</view>
            <view class="value">{{ is_enterEnum[formData.is_enter] }}</view>
          </view>
          <view class="form-item">
            <view class="key">联系电话</view>
            <view class="value">{{ formData.contact_phone }}</view>
          </view>
        </view>
        <view class="title">故障照片/视频</view>
        <image class="repair-detail-image" v-for="(item, index) in formData.images" :key="index" :src="item" @click="previewImage(item)"></image>
        <view class="images-wrap" v-if="formData.video && formData.video.length">
          <cu-uploader readonly fileMediatype="video" fileAcceptType="uploadMp4" v-model="formData.video"></cu-uploader>
        </view>
      </view>
      <!-- 没修好弹窗 -->
      <uv-modal ref="repair-modal" align="center" content="是否确定需要重新维修" showCancelButton @confirm="confirm"></uv-modal>

      <!-- 去评价弹窗 -->
      <uv-popup ref="evaluation-popup" :closeOnClickOverlay="false">
        <view class="popup-container">
          <view class="popup-header">
            <view class="left"></view>
            <p class="center">评价</p>
            <view class="right">
              <uv-icon class="right" name="close" @click="popupClose"></uv-icon>
            </view>
          </view>
          <view class="popup-main">
            <view v-for="(item, index) in evaluate" :key="index">
              <uv-transition v-if="item.show" :show="item.show" mode="slide-right">
                <view :class="['step', 'step-' + index]">
                  <text>{{ item.message }}</text>
                  <view class="flex justify-around">
                    <template v-if="item.value">
                      <template v-if="item.value === '3'">
                        <uv-transition :show="true" mode="zoom-in">
                          <image :src="$CDN('/customer/static/images/png/bad-active.png')" title="不好-active"></image>
                        </uv-transition>
                        <image @click="handleEvaluateNuxt(index, '5')" :src="$CDN('/customer/static/images/png/good.png')" title="好"></image>
                      </template>
                      <template v-else>
                        <image @click="handleEvaluateNuxt(index, '3')" :src="$CDN('/customer/static/images/png/bad.png')" title="不好"></image>
                        <uv-transition :show="true" mode="zoom-in">
                          <image :src="$CDN('/customer/static/images/png/good-active.png')" title="好-active"></image>
                        </uv-transition>
                      </template>
                    </template>
                    <template v-else>
                      <image @click="handleEvaluateNuxt(index, '3')" :src="$CDN('/customer/static/images/png/bad.png')" title="不好"></image>
                      <image @click="handleEvaluateNuxt(index, '5')" :src="$CDN('/customer/static/images/png/good.png')" title="好"></image>
                    </template>
                  </view>
                  <view class="flex justify-around">
                    <view>{{ item.bad }}</view>
                    <view>{{ item.good }}</view>
                  </view>
                  <view v-if="index == 'evaluateStepThree'">
                    <view class="tag-wrap">
                      <view
                        :class="['tag-item', item.valueList.includes(items.id) ? 'active-item' : '']"
                        v-for="(items, indexs) in item.list"
                        :key="indexs"
                        @click="handleSetActive(items)"
                      >
                        {{ items.name }}
                      </view>
                    </view>
                    <uv-textarea
                      class="popup-area"
                      v-model="item.content"
                      :showConfirmBar="false"
                      placeholder="请对本次服务留下您宝贵的建议"
                      maxlength="50"
                      height="58"
                      count
                    ></uv-textarea>
                    <view class="evaluate-button" :class="{ isSubmit: isSubmit }" @click="submit()">
                      {{ isSubmit ? '立即提交' : '请完成评价' }}
                    </view>
                  </view>
                </view>
              </uv-transition>
            </view>
          </view>
          <!-- <view class="button-wrap">
            <view class="button cancel" @click="popupClose">取消</view>
            <view class="button submit" @click="popupSubmit">确认</view>
          </view> -->
        </view>
      </uv-popup>
      <!-- 固定底部按钮 -->
      <view class="fixed-button">
        <view class="button-group">
          <!-- <view class="button" @click="seeEvalution()"> 查看评价 </view> -->
          <view v-if="stepState !== 3 && stepState !== 4" class="button" @click="handlePhone(formData.service_phone)">联系门店</view>
          <view v-if="stepState === 3" class="button" @click="notFixed()">没修好</view>
          <view v-if="stepState === 3 && !reviewed" class="button" @click="handleEvaluate()"> 去评价 </view>
          <view v-if="(stepState == 3 || stepState == 4) && reviewed" @click="seeEvalution()" class="button"> 查看评价 </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import Helper from '@/common/helper'
import { mapActions, mapGetters } from 'vuex'
import { evaluateTags, getRepairDetail, postReopen, replyAll } from './api'
export default {
  name: 'detail',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      id: '',
      stepList: [
        { name: '待受理', state: 0 },
        { name: '已受理', state: 1 },
        { name: '处理中', state: 2 },
        { name: '已完成', state: 3 },
      ],
      formData: {
        item_url: '',
        item_name: '',
        detail: '',
        room_name: '',
        images: [],
        video: [],
        will_repair_date: '',
        will_repair_start: '',
        contact_phone: '',
        service_phone: '',
        tel: '',
        is_enter: '',
        remark: '',
      },
      progressData: {
        created: '',
        detail: '',
        user_name: '',
      },
      stepState: 0,
      urlParams: '',
      is_enterEnum: {
        0: '不可以',
        1: '可以',
      },
      stepStateEnum: {
        待受理: 0,
        已受理: 1,
        处理中: 2,
        已完成: 3,
        已评价: 4,
        已拒绝: 5,
        不受理: 6,
      },
      timeMapping: {
        9: '09:00-12:00',
        12: '12:00-15:00',
        15: '15:00-18:00',
        18: '18:00-21:00',
      },
      evaluateIndex: 0,
      evaluateTagList: [],
      customStyle: { width: '100%', height: '100%', backgroundColor: '#3c9cff' },
      evaluate: {
        // evaluateStepOne: { field: 'serve_satisfaction', show: true, message: '您对本次维修服务满意程度?', bad: '很不好', good: '非常好', value: '' },
        // evaluateStepTwo: { field: 'speed_satisfaction', show: false, message: '您对本次维修服务效率如何?', bad: '很慢啊', good: '很速度', value: '' },
        evaluateStepThree: {
          show: true,
          message: '满意工作人员的服务吗?',
          bad: '不满意',
          good: '满意',
          list: [],
          value: '',
          valueList: [],
          content: '',
        },
      },
      reviewed: false,
      evaluateType: '',
      evalution_id: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    isSubmit() {
      return this.evaluate.evaluateStepThree.valueList.length != 0
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    console.log(this.$Route.query)
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await getRepairDetail({ id })
      const { status, progress, evalution, room_name, project_id, room_id } = data
      this.stepState = this.stepStateEnum[status]
      this.evalution_id = evalution?.id
      // form1
      for (let key in this.formData) {
        if (key == 'video') {
          if (Array.isArray(data[key])) {
            this.formData[key] = data[key].map((v) => {
              return {
                url: v,
              }
            })
          }
        } else {
          this.formData[key] = data[key]
        }
      }
      if (status == '不受理') {
        const index = progress.length - 1
        this.progressData.detail = progress[index].detail
        this.progressData.user_name = progress[index].user_name
        this.progressData['date'] = this.progressData.created.split(' ')[0]
        this.progressData['time'] = this.progressData.created.split(' ')[1]
      } else {
        for (let key in progress[this.stepState]) {
          this.progressData[key] = progress[this.stepState][key]
          this.progressData['date'] = this.progressData.created.split(' ')[0]
          this.progressData['time'] = this.progressData.created.split(' ')[1]
        }
        // 如果已完成可以评价时调用
        if (status == '已完成') {
          this.getTag()
        }
      }
      this.reviewed = evalution && evalution.serve_satisfaction && evalution.serve_satisfaction != ''
      // this.urlParams = JSON.stringify({
      //   room_name,
      //   project_id,
      //   room_id,
      // })
      // console.log('res', res)
    },
    async getTag() {
      const { id } = this.$Route.query
      const { data } = await evaluateTags({ id, type: 5 })
      this.evaluateTagList = data?.tags || []
    },
    notFixed() {
      this.$refs['repair-modal'].open()
    },
    // 没修好弹窗确认
    async confirm() {
      const { id: repair_id } = this.$Route.query
      const { data, error } = await postReopen({ repair_id })
      if (error === 0) {
        uni.navigateBack(1)
      }
    },
    handleEvaluate() {
      this.$refs['evaluation-popup'].open('bottom')
      setTimeout(() => {
        this.show = true
      }, 1000)
    },
    popupClose() {
      this.$refs['evaluation-popup'].close()
    },
    // 预览图片
    previewImage(value) {
      const arr = []
      arr.push(value)
      Helper.previewImage(arr)
    },
    seeEvalution() {
      // const { id } = this.$Route.query
      // console.log(' this.$Route.query', this.$Route.query)
      this.$ROUTE.go('/pages/subpackage/repair/evaluate', { id: this.evalution_id })
    },
    handleEvaluateNuxt(evaluateName, value) {
      this.evaluate[evaluateName].value = value
      switch (evaluateName) {
        case 'evaluateStepThree':
          this.evaluate.evaluateStepThree.valueList = []
          if (value == 5) {
            this.evaluate.evaluateStepThree.list = this.evaluateTagList.filter((v) => v.score == 4 || v.score == 5).slice(0, 2)
          } else {
            this.evaluate.evaluateStepThree.list = this.evaluateTagList.filter((v) => v.score != 4 && v.score != 5).slice(0, 2)
          }
          break
        default:
          break
      }
    },
    handleSetActive({ id }) {
      if (this.evaluate.evaluateStepThree.valueList.includes(id)) {
        this.evaluate.evaluateStepThree.valueList.forEach((v, i) => {
          if (v == id) {
            this.evaluate.evaluateStepThree.valueList.splice(i, 1)
          }
        })
      } else {
        this.evaluate.evaluateStepThree.valueList.push(id)
      }
    },
    async submit() {
      const { value, valueList, content } = this.evaluate.evaluateStepThree
      const { id } = this.$Route.query
      const { errcode } = await replyAll({ id, tags: valueList, type: 5, score: value, origin_id: 1, managerScore: value, content, serve_satisfaction: value })
      if (errcode === 0) {
        uni.$uv.toast('评价成功')
        this.popupClose()
        uni.navigateBack(1)
        return
      }
    },
    handlePhone(phone) {
      Helper.callPhone(phone)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('detail-container')} {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40rpx 140rpx;
  .card {
    margin: 20rpx 0;
    padding: 20rpx 32rpx;
    border-radius: 8rpx;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
    image {
      width: 160rpx;
      height: 160rpx;
    }
    .problem {
      margin-left: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 12px;
    }
  }
  .step {
    margin: 20rpx 20rpx;

    .step-wrap {
      display: flex;
      justify-content: space-between;
    }
    .step-item {
      // background: #f8d44c;
      padding: 8rpx 15rpx;
      font-size: 24rpx;
      color: white;
      border-radius: 8rpx;
      position: relative;

      &::before {
        position: absolute;
        content: ' ';
        // background: #f8d44c;
        border-radius: 50rpx;
        width: 15rpx;
        height: 15rpx;
        bottom: -50rpx;
        left: 50%;
        transform: translate(-50%, 0);
      }
      &::after {
        position: absolute;
        content: ' ';
        bottom: -45rpx;
        left: 65rpx;
        width: 158%;
        border: 2rpx dashed #f1f1f1;
      }
      &:last-child {
        &::after {
          border: 0;
        }
      }
      .triangle {
        position: relative;
        &::before {
          position: absolute;
          content: ' ';
          bottom: -18rpx;
          left: 50%;
          transform: translate(-50%, 0);
          width: 0;
          height: 0;
          border-left: 10rpx solid transparent; /* 左边为透明 */
          border-right: 10rpx solid transparent; /* 右边为透明 */
          border-top: 10rpx solid #f8d44c; /* 底部为红色，控制三角形高度 */
        }
      }
    }
    .grey {
      color: #999999;
      &::before {
        background: #999999;
      }
      .triangle {
        display: none;
      }
    }
    .black {
      color: #222222;
      &::before {
        background: #222222;
      }
      .triangle {
        display: none;
      }
    }
    .start {
      color: white;
      background: #f8d44c;
      &::before {
        background: #f8d44c;
      }
    }
    .end {
      background: #78e4a8;
      color: white;
      &::before {
        background: #78e4a8;
      }
      .triangle {
        &::before {
          border-top: 10rpx solid #78e4a8;
        }
      }
    }
    .second {
      background: #ed7b4d;
      &::before {
        background: #ed7b4d;
      }
      .triangle {
        &::before {
          border-top: 10rpx solid #ed7b4d;
        }
      }
    }
    .third {
      background: #5daaf8;
      &::before {
        background: #5daaf8;
      }
      .triangle {
        &::before {
          border-top: 10rpx solid #5daaf8;
        }
      }
    }
    .no-step {
      background: unset;
      color: #d8d8d8;
      &::before {
        background: #d8d8d8;
      }
      .triangle {
        display: none;
      }
    }
    .step-detail {
      display: flex;
      justify-content: space-between;
      margin-top: 80rpx;
      .left {
        margin-right: 30rpx;
        .time {
          font-weight: 600;
          font-size: 24rpx;
        }
        .date {
          font-size: 22rpx;
          white-space: nowrap;
        }
      }
      .center {
        font-size: 24rpx;
      }
    }
  }
}
.flex {
  display: flex;
}
.modules {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0rpx 20rpx;
  }
  .step-wrap {
    display: flex;
    flex-direction: column;
    .step-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .step-title {
        padding: 0 0 40rpx 40rpx;
        font-size: 28rpx;
        width: 20%;
        position: relative;
        &::before {
          position: absolute;
          content: ' ';
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background: #212121;
          left: 0;
          top: 15rpx;
          // transform: translate(0, -50%);
        }
      }
      .step-value {
        font-size: 24rpx;
        .date {
        }
        .value {
        }
      }
    }
  }
  .form-wrap {
    .form-item {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f1f1f1;
      font-size: 26rpx;
      .key {
        color: #656565;
      }
      .value {
      }
    }
  }
  .repair-detail-image {
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
  }
}
.fixed-button {
  width: 100%;
  background: white;
  border-top: 2rpx solid #f1f1f1;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  .button-group {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 50rpx;
    .button {
      width: 50%;
      flex: 1;
      border: 2rpx solid #f1f1f1;
      padding: 20rpx 0;
      border-radius: 8rpx;
      text-align: center;
      font-size: 26rpx;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.not-fixed {
  .popup-content {
    width: 650rpx;
    position: relative;
    .popup-header {
      width: 100%;
      position: absolute;
      top: 0;
      background: white;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
    }
    .poput-main {
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .poput-button {
      display: flex;
      padding: 0 20rpx;
      justify-content: center;
      margin-bottom: 30rpx;
      .button {
        width: 50%;
        text-align: center;
        border: 2rpx solid #f1f1f1;
        font-size: 28rpx;
        padding: 20rpx 0;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
    }
  }
}
.evaluate {
  .popup-content {
    position: relative;
    .popup-header {
      width: 100%;
      position: absolute;
      top: 0;
      background: white;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
    }
    .poput-main {
      .evaluate-message {
        padding: 30rpx 0;
        text-align: center;
        font-size: 26rpx;
      }
      .evaluate-wrap {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 50rpx;
        view {
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
        }
        image {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 30rpx;
        }
      }
    }
    .evaluate-step3 {
      height: 800rpx;
      box-sizing: border-box;
      padding: 30rpx;
      .evaluate-title {
        font-size: 28rpx;
        text-align: center;
      }
      .flex {
        display: flex;
        justify-content: space-evenly;
        margin-top: 30rpx;
        .flex-wrap {
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 26rpx;
        }
        .image {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.popup-container {
  width: 100%;
  min-height: 400rpx;
  max-height: 900rpx;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  .popup-header {
    display: flex;
    justify-content: space-between;
    .left {
      width: 32rpx;
      visibility: hidden;
    }
    .center {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .right {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .popup-main {
    .step {
      image {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
      }
      text {
        margin: 40rpx 0;
        display: block;
        text-align: center;
      }
    }
    .flex {
      display: flex;
    }
    .justify-around {
      justify-content: space-around;
    }
    .tag-wrap {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      margin: 60rpx 0;
      .tag-item {
        // min-width: 30%;
        width: 120px;
        border: 2rpx solid black;
        padding: 8rpx 30rpx;
        font-size: 24rpx;
        text-align: center;
        border-radius: 8rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
        &:nth-child(2n) {
          margin-right: 0;
          margin-left: auto;
        }
      }
      .active-item {
        border-color: #ef4f12;
        background: #ef4f12;
        color: white;
      }
    }
    .evaluate-button {
      margin-top: 40rpx;
      box-sizing: border-box;
      padding: 30rpx 0;
      color: white;
      background: #cccccc;
      border-radius: 8rpx;
      text-align: center;
    }
    .isSubmit {
      background: #ef4f12;
      color: white;
    }
  }
  .button-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 0 32rpx 32rpx;
    .button {
      font-weight: 400;
      font-size: 28rpx;
      padding: 24rpx 0;
      width: calc(50% - 17rpx);
      border-radius: 200rpx;
      text-align: center;
    }
    .cancel {
      background: #ffffff;
      border: 2rpx solid $uv-primary;
      color: $uv-primary;
    }
    .submit {
      background: $uv-primary;
      color: #ffffff;
    }
  }
}
.images-wrap {
  padding: 0 15px;
  margin: 10px 0;
  .item {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    margin-bottom: 15px;
    background: #f1f1f1;
  }
}
</style>
